<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 新增按钮 -->
        <el-row>
          <span style="font-size: 15px; color: pink"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button
          class="button-new"
            @click="$router.push('new')"
            type="success"
            icon="el-icon-edit"
            >新增试题</el-button
          >
        </el-row>
        <!-- 筛选 -->
        <el-form ref="form" :model="query" label-width="80px" size="small">
          <el-row>
            <!-- 学科 -->
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  style="width: 100%"
                  v-model="query.subjectID"
                  placeholder="请选择"
                  @change="onsubjectChange"
                >
                  <el-option
                    v-for="(item, index) in subjects"
                    :key="index"
                    :label="item.subjectName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 二级目录 -->
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select
                  style="width: 100%"
                  v-model="query.second_level"
                  placeholder="请选择"
                  @change="onDirectoryChange"
                >
                  <el-option
                    v-for="(item, index) in second_level"
                    :key="index"
                    :label="item.second_levelName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 标签 -->
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select
                  style="width: 100%"
                  v-model="query.labelon"
                  placeholder="请选择"
                  @change="onDirectoryChange"
                >
                  <el-option
                    v-for="(item, index) in labelon"
                    :key="index"
                    :label="item.labelonName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 关键字 -->
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="query.input"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- 试题类型 -->
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select
                  style="width: 100%"
                  v-model="query.questionTyppe"
                  placeholder="请选择"
                  @change="onDirectoryChange"
                >
                  <el-option
                    v-for="(a, b, c) in questionType"
                    :key="a"
                    :label="b"
                    :value="c"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 难度 -->
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select
                  style="width: 100%"
                  v-model="query.difficulty"
                  placeholder="请选择"
                  @change="onDirectoryChange"
                >
                  <el-option
                    v-for="(a, b, c) in difficulty"
                    :key="a"
                    :label="b"
                    :value="c"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 方向 -->
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
                  style="width: 100%"
                  v-model="query.direction"
                  placeholder="请选择"
                  @change="onDirectoryChange"
                >
                  <el-option
                    v-for="(item, index) in direction"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 录入人 -->
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select
                  style="width: 100%"
                  v-model="query.people"
                  placeholder="请选择"
                  @change="onDirectoryChange"
                >
                  <el-option
                    v-for="(item, index) in people"
                    :key="index"
                    :label="item.peopleName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 题目备注 -->
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input
                  v-model="query.Topic_remarks"
                  placeholder="请输入内容"
                  @change="onDirectoryChange"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- 企业简介 -->
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input
                  v-model="query.enterprise"
                  placeholder="请输入内容"
                  @change="onDirectoryChange"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- 城市============== -->
            <el-col :span="6">
              <el-form-item class="city-box" label="城市">
                <el-select
                  class="city-1"
                  v-model="query.provinces"
                  placeholder="请选择"
                  @change="onProvincesChange"
                >
                  <el-option
                    v-for="(a, b, c) in provinces"
                    :key="a"
                    :label="b"
                    :value="c"
                  ></el-option>
                </el-select>
                <!-- 地区 -->
                <el-select
                  class="city-2"
                  v-model="query.city"
                  placeholder="请选择"
                  @change="onCityssChange"
                >
                  <el-option
                    v-for="(a, b, c) in citys"
                    :key="a"
                    :label="b"
                    :value="c"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="text-align: right">
                <el-button>清除</el-button>
                <el-button class="ss" type="primary">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          :title="'数据一共'+counts+' 条'"
          style="margin-bottom: 15px"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- ================放置其他组================================ -->
        <el-table :data="list" style="width=100%">
          <el-table-column
            prop="number"
            label="试题编号"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="82"
          ></el-table-column>
          <el-table-column
            prop="remarks"
            label="目录"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="80"
          >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.questionType==='1'">单选</span>
              <span v-else-if="scope.row.questionType==='2'">多选</span>
              <span v-else>简答</span>
            </div>
          </template>
          </el-table-column>
          <el-table-column
            prop="tags"
            label="题干"
            width="280"
          ></el-table-column>

          <el-table-column prop="creator" label="录入时间" width="180">
            <template slot-scope="scope">
              {{ scope.row.addDate }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="难度" width="80">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.questionType === '1'">简单</span>
                <span v-else-if="scope.row.questionType === '2'">一般</span>
                <span v-else>困难</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="creator"
            label="录入人"
            width="80"
          ></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <div>
                <el-button
                title="预览"
                  @click="preview(scope.row)"
                  plain
                  size="small"
                  type="primary"
                  icon="el-icon-view"
                  circle
                ></el-button>
                <el-button
                title="修改"
                  @click="toEdit(scope.row)"
                  plain
                  size="small"
                  type="success"
                  icon="el-icon-edit"
                  circle
                ></el-button>
                <el-button
                title="删除"
                  @click="removeQuestion(scope.row)"
                  plain
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                ></el-button>
                <el-button
                title="加入精选"
                  @click="choiceAdd(scope.row)"
                  plain
                  size="small"
                  type="warning"
                  icon="el-icon-check"
                  circle
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 50, 100]"
            :current-page="query.page"
            background
            :page-size="query.pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="counts"
          >
          </el-pagination>

          <!-- 预览组件 -->
          <questions-preview
          :dialogVisible="dialogVisible"
          @click="dialogVisible = false"
          :questionItem="questionItem">
          </questions-preview>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import questionsPreview from '../components/articles-preview.vue'
// eslint-disable-next-line import/no-duplicates
import question from '@/api/hmmm/questions'
// 导入城市和区域/县
import { provinces, citys } from '@/api/hmmm/citys'
// 标签接口
import tag from '@/api/hmmm/tags'
// 用户列表
// eslint-disable-next-line import/no-duplicates
import { listApi } from '@/api/hmmm/questions'
// 学科接口
import { subjectListApi } from '@/api/hmmm/subjects'
// 目录接口
import directory from '@/api/hmmm/directorys'
export default {
  data () {
    return {
      list: [],
      currentPage4: 0,
      // 传入子组件的试题
      questionItem: {},
      // 试题预览
      dialogVisible: false,
      // 题库列表
      questionList: [],
      // 数据条数
      counts: 0,
      // 学科列表
      subjects: [],
      // 二级目录
      second_level: [],
      // 标签
      labelon: [],
      // 题目备注
      Topic_remarks: '',
      // 企业简称
      enterprise: '',
      // 录入人
      people: [],
      // 城市
      provinces: provinces(),
      // 地区
      citys: [],
      // 试题类型
      difficulty: {
        简单: 1,
        一般: 2,
        困难: 3
      },
      // 难度
      questionType: {
        单选: 1,
        多选: 2,
        简答: 3
      },
      // 方向
      direction: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      // subjectlist: [], // 学科
      query: {
        page: 1, // 当前页数
        pagesize: 5, // 每页显示条数
        subjectID: null, // 学科
        second_level: null, // 二级目录
        questionType: null, // 难度
        labelonID: null, // 标签
        input: null, // 关键字
        questionTyppe: null, // 试题类型
        direction: null, // 方向
        creatorID: null, // 录入人
        Topic_remarks: null, // 题目备注
        enterprise: null, // 企业简介
        provinces: null, // 城市
        city: null // 县
      }
    }
  },
  mounted () {
    // 题库列表
    this.getQuestionList()
    // 学科列表
    this.subjectsAdd()
    // 标签列表
    this.tagList()
    // 录入人列表
    this.getCreator()
  },
  methods: {
    // 修改试题
    toEdit (row) {
      this.$router.push({
        path: 'new',
        query: {
          id: row.id
        }
      })
    },
    // 预览
    async preview (item) {
      const { data } = await question.detail({ id: item.id })
      data.questionType = item.questionType
      data.subject = item.subject
      this.dialogVisible = true
      this.questionItem = data
    },
    //  清除全部
    clearall () {
      for (const key in this.query) {
        if (key === 'page' || key === 'pagesize') {
          continue
        }
        this.query[key] = null
      }
      this.tageList = this.directory = []
      this.getQuestionList()
    },
    // 加入精选
    async choiceAdd (item) {
      const result = await this.$confirm(
        {
          confirmButton: '确定',
          cancelButton: '取消',
          type: 'info'
        }
      ).catch((err) => err)
      if (result === 'confirm') {
        const data = await question.choiceAdd({
          id: item.id,
          choiceState: 1
        })
        if (data.status === 200) {
          this.$message.success('加入精选成功')
        }
        this.getQuestionList()
      }
    },
    // 页码发生变化
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getQuestionList()
    },
    // 页面变化
    handleCurrentChange (val) {
      this.query.page = val
      this.list.pagesize = val
    },
    // 删除题
    async removeQuestion (item) {
      const result = await this.$confirm(
        {
          confirmButton: '确定',
          canceButton: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (result === 'confirm') {
        const data = await question.remove(item)
        if (data.status === 200) {
          return this.$message.success('删除成功')
        }
      }
    },
    // 获取题库列表
    async getQuestionList () {
      const { data } = await listApi(this.query)
      console.log(data)
      this.list = data.items
      this.counts = data.counts
    },
    // 市级变化运行函数
    onProvinceChange (val) {
      this.query.city = ''
      this.citys = citys(val)
    },
    // 获取录入人
    async getCreator () {
      try {
        const { data } = await this.list({
          page: 1,
          pagesize: 100,
          input: ''
        })
        this.creator = data.list
      } catch (error) {}
    },
    // 目录框变化运行的函数
    onDirectoryChange (val) {
      this.tagList()
    },
    // 学科框发生变化运行函数
    async onsubjectChange (val) {
      this.query.labelonID = null
      this.query.second_level = null
      const { data } = await directory.list({ subjectID: val })
      this.directory = data.items
      this.tagList = []
    },
    // 获取学科列表
    async subjectsAdd () {
      const { data } = await subjectListApi({ page: 1, pagesize: 100 })
      // this.subjectID = data.items
      this.subjects = data.items
      this.console.log('这里是学科列表', data.items)
    },
    // 获取标签列表
    async tagList () {
      const { data } = await tag.list({
        labelon: this.query.labelonID
      })
      this.taglist = data.items
    },
    created () {
    // 获取题库
      this.getQuestionList()
      // 获取学科
      this.subjectsAdd()
      // 获取录入人
      this.getCreator()
      // 获取标签
      this.tagList()
    },
    components: {
      questionsPreview
    }
  }
}
</script>

<style scoped>
.city-1{
  width: 45%;
  margin-right: 5%;
}
.city-2{
  width: 50%;
}
.ss {
  margin-left: 10px;
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
  margin-bottom: 15px;
}
.button-new {
  float: right;
  line-height: 12px;
  margin-bottom: 20px;
}
</style>
